<template>
  <div>
    <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom">
      <el-button text @click="toggle">
        <el-icon v-if="isFullscreen"><BottomLeft /></el-icon>
        <el-icon v-else><FullScreen /></el-icon>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { FullScreen, BottomLeft } from '@element-plus/icons-vue'
import screenfull from 'screenfull'

const isFullscreen = ref(false)

const toggle = () => {
  if (!screenfull.isEnabled) {
    alert('您的浏览器不支持全屏功能')
    return false
  }
  screenfull.toggle()
}

const change = () => {
  isFullscreen.value = screenfull.isFullscreen
}

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on('change', change)
  }
})

onUnmounted(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change)
  }
})
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
</style>